<!--
 * @Author: dongdong.wu
 * @Date: 2020-08-28 10:09:02
 * @Description: 纵向表格
-->
<template>
  <div>
    <table class="ele-column-table">
      <tr v-for="(row, i) in copyRowList" :key="`row${i}`">
        <td
          v-for="(column, index) in row"
          :key="`column${index}`"
          :colspan="index % 2 == 0 ? 0 : column.colspan || 0"
          :class="[index % 2 == 0 ? 'td-title' : 'td-text']"
        >
          <!-- 标题 -->
          <span
            v-if="index % 2 == 0"
            :class="{
              'we-column-table_label-required': column.required
            }"
            :style="column.style"
            >{{ column.label }}</span
          >
          <!-- 标题对应的值html模式 -->
          <span v-else-if="column.html" v-html="tableData[column.prop]" />
          <!-- 标题对应的值link模式 -->
          <span v-else-if="column.link">
            <!-- link模式 -->
            <el-link type="primary" @click="clickLink(column)">{{
              tableData[column.prop] | tableFilter(column.fName)
            }}</el-link>
          </span>
          <!-- 标题对应的值slot模式 -->
          <span
            v-else-if="$scopedSlots[column.prop]"
            :data-label="`${column.label}必填`"
            :class="{
              'label-tips-required': requiredNow
                ? column.required &&
                  validateNow(tableData[column.prop], column.prop)
                : column.required && isRequired(tableData[column.prop])
            }"
          >
            <!-- 增加slot可编辑等等。不建议 -->
            <slot :name="column.prop" :item="tableData" />
          </span>
          <!-- 标题对应的值普通标准模式 -->
          <span v-else>{{
            tableData[column.prop] | tableFilter(column.fName)
          }}</span>
        </td>
      </tr>
    </table>
  </div>
</template>
<script>
import Validator from "./validator";
export default {
  name: "WeColumnTable",
  props: {
    /**
     * label: 显示的title
     * prop: 对应的数据字段
     * colspan: 合并单元格。这里只能3
     * required：当前字段是否必填
     * html：是否开启html渲染
     * link：是否开启link。对应事件link。
     */
    rowList: {
      type: Array,
      default: () => {
        return [];
      }
    },
    tableData: {
      type: Object,
      default: () => {
        return {};
      }
    },
    // 是否开启必填功能
    required: {
      type: Boolean,
      default: false
    },
    // 是否开启立即监听。值为空直接给出提示
    requiredNow: {
      type: Boolean,
      default: false
    },
    canclShow: {
      // 取消按钮是否显示
      type: Boolean,
      default: true
    },
    confirmShow: {
      // 是否显示确定按钮
      type: Boolean,
      default: true
    }
  },
  data() {
    return {
      copyRowList: [], // 保留的副本数据
      colspan: 0, // TODO 合并单元个格的数量,这里控制动态的colspan 而不用自己传递()
      Validator: "",
      requireList: [] // 保存需要校验的prop
    };
  },
  watch: {
    rowList: {
      immediate: true,
      deep: true,
      handler(val) {
        this.requireList = [];
        this.buildData(val);
      }
    },
    tableData: {
      immediate: true,
      deep: true,
      handler(val) {
        if (this.required) {
          this.Validator = new Validator();
          this.buildRule();
        }
      }
    }
  },
  methods: {
    isRequired(value) {
      if (typeof value === "undefined" || value === null || value === "") {
        return true;
      } else {
        return false;
      }
    },
    validateNow(value, prop) {
      // 立即校验
      return value ? false : this.requireList.includes(prop);
    },
    resetValid() {
      // 重置error label
      this.requireList = [];
    },
    buildData(data) {
      this.copyRowList = [];
      data.forEach((i, index) => {
        const iList = [];
        i.forEach(item => {
          iList.push(item);
          iList.push(item);
        });
        this.copyRowList.push(iList);
      });
    },
    buildRule() {
      this.rowList.forEach((i, index) => {
        i.forEach(item => {
          if (item.required && this.required) {
            this.initRules(item.prop, item.label);
          }
        });
      });
    },
    initRules(prop, label) {
      this.Validator.add(this.tableData, prop, "required", `${label}必填`);
    },
    async validate() {
      //  表单校验返回true 则表示数据符合，否则给出异常
      const validateFun = await this.Validator.validate();
      this.buildRequiredMsg([...validateFun]);
      return validateFun.length == 0;
    },
    buildRequiredMsg(validate) {
      this.requireList = [];
      validate.forEach(i => {
        this.requireList.push(i.prop);
      });
    },
    clickLink(column) {
      this.$emit("link", column);
    }
  }
};
</script>
<style lang="scss" scoped>
.ele-column-table {
  width: 100%;
  border: 1px solid #e2e2e2;
  border-collapse: collapse;

  tr {
    height: 30px;

    //line-height: 30px;
    td {
      border: 1px solid #e8eaeb;
      font-size: 12px;
      color: #393939;
      padding-left: 8px;
      .we-column-table_label-required:before {
        color: red;
        margin-right: 5px;
        content: "*";
      }
      .label-tips-required:after {
        content: attr(data-label);
        line-height: 20px;
        color: red;
      }
      .label-tips-required .el-input {
        border: 1px solid red;
        border-radius: 5px;
      }
    }

    .td-title {
      width: 17%;
      background: #f5f8fa;
    }

    .td-text {
      width: 33%;
      padding: 8px;
    }
  }
}
</style>
